<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的模板语法</title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="count">{{count}}</div>
			<div class="v-text" v-text="text"></div>
			<div class="v-html" v-html="html"></div>
			<div class="title" :title="title"></div>
			<div class="bind-event" @click="myClickEvent()">简写点击事件</div>
			<input type="text" v-model="age" placeholder="请输入年龄">
			<button @click="updateAge()">年龄递增</button>
			<div class="name" v-if="num == 1">zhangyi</div>
			<div class="name" v-else-if="num == 2">wnager</div>
			<div class="name" v-else>xiesan</div>
			
			<table border="1" style="text-align: center;">
				<tr>
					<td>商品名称</td>
					<td>价格</td>
					<td>数量</td>
					<td>总价</td>
					<td>操作</td>
				</tr>
				<tr v-for="(val,index) in goods" :key="index">
					<td>{{val.title}}</td>
					<td>{{val.price}}元</td>
					<td>{{val.chooseNum}}</td>
					<td>{{computAllPrice(index)}}</td>
					<td>
						<button @click="increse(index)">增加</button>
						<button @click="decrese(index)">减少</button>
					</td>
				</tr>
				<tr>
					<td colspan="4">支付金额</td>
					<td>0元</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script>
	const {createApp} = Vue;
	const app = createApp({
		data() {
			return{
				count:20,
				text:"吃烤鸭",
				html:"吃饭",
				//绑定属性;v-bind,简写为:
				title:"我是一个绑定信息",
				isDisabled:false,
				//v-on:绑定监听事件，简写为:@
				//v-model:数据的双向绑定
				age:18,
				//v-if v-else if v-else 
				num:2,
				//v-for 循环
				goods:[{title:"一只酸奶牛",price:10,chooseNum:0},{title:"娃哈哈",price:2,chooseNum:0}]
			}
		},
		menthods:{
			myClickEvent(){
				alert(123)
			},
			updateAge(){
				this.age++
			},
			increse(index){
				this.goods[index].chooseNum++
			},
			decrese(index){
				if(this.goods[index].chooseNum<=0){
					return
				}
				this.goods[index].chooseNum--
			}
		},
		//计算器
		computed:{
			computAllPrice(){
				return function(index){
					return this.goods[index].chooseNum * this.goods[index].price
				}
			}
		},
		//侦听器
		watch:{
			age(newAge,oldAge){
				console.log("变化之前${oldAge}")
				console.log("变化之后${newAge}")
			}
		},
		mounted() {
			setInterval(()=>{
				this.count++
			},1000)
		},
		beforeCreate() {
			
		},
		created() {
			
		},
		beforeMount() {
			
		},
		beforeUpdate() {
			
		},
		updated() {
			
		},
		beforeUnmount() {
			
		},
		unmounted() {
			
		}
	})
	const vm = app.mount("#app");
</script>